<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看OPPO岗位信息查看</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            background-color: #f4f4f4;
        }
        .container {
            width: 100%;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: left;
        }
        .form-group {
            margin-bottom: 20px;
        }
        textarea {
            width: 80%;
            height: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-align: left;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-align: left;
        }
        button:hover {
            background-color: #0056b3;
        }
        .description {
            margin: 20px 0;
            text-align: left;
        }
        .steps {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 20px 0;
            text-align: left;
        }
        .step {
            margin-bottom: 20px;
            text-align: left;
        }
        .step img {
            width: 100%;
            max-width: 300px;
            border-radius: 8px;
        }
        .json-output {
            width: 80%;
            max-width: 100%;
            background: #f9f9f9;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            overflow-x: auto;
            text-align: left;
        }
        .json-output pre {
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            text-align: left;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    <script>
        function AES_ECB_DECRYPT(textBase64) {
            var secretKey = "abcdefgabcdefg12";
            var keyHex = CryptoJS.enc.Utf8.parse(secretKey);
            var decrypt = CryptoJS.AES.decrypt(textBase64, keyHex, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            });
            return CryptoJS.enc.Utf8.stringify(decrypt);
        }
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelector("button").addEventListener("click", function() {
                var text = document.querySelector("textarea").value;
                try {
                    var json = JSON.parse(text);
                    var textBase64 = json.data;
                    var decryptedText = AES_ECB_DECRYPT(textBase64);
                    var formattedJson = JSON.stringify(JSON.parse(decryptedText), null, 4);
                    document.querySelector(".json-output pre").textContent = formattedJson;
                } catch (e) {
                    document.querySelector(".json-output pre").textContent = "Invalid JSON data or decryption error";
                }
            });
        });
    </script>
</head>
<body>
<div class="container">
    <div class="form-group">

        <textarea placeholder="请输入复制来的全部数据，形如
{
    code: 0,
    data: abj,
    msg: success
}"></textarea>
    </div>
    <div class="form-group">
        <button>查询</button>
    </div>
    <div class="description">
        <p>目前已知的几个参数</p>
        <p>nodeStatusDesc:表示状态</p>
        <p>positionQuantity:表示这个职位在这个城市的HC数量</p>
        <p>具体可自行参考小红书上分享的参数意义，也欢迎大家评论区补充</p>
        <p>先将就着上线用，等有时间我再优化一下UI</p>
    </div>
    <div class="json-output">
        <pre>{ "example": "parsed JSON data will appear here" }</pre>
    </div>
    <div class="steps">
        <div class="step">
            <p>1、打开<a href="https://careers.oppo.com/university/oppo/center/history">https://careers.oppo.com/university/oppo/center/history</a>并登录</p>
            <img src="./img/img1.png" alt="Step 1">
        </div>
        <div class="step">
            <p>2、点击<b>F12或者鼠标右键检查</b>打开控制台（Devtool），并点击<b>Network（或者网络)</b>，没找到就在<b>>></b>这</p>
            <img src="./img/img2.png" alt="Step 2">
        </div>
        <div class="step">
            <p>3、在<b>Filter(或者筛选器）</b>输入<b>queryAllDeliveryDynamics</b></p>
            <img src="./img/img3.png" alt="Step 3">
        </div>
        <div class="step">
            <p>4、刷新网页（F5）后鼠标点击<b>queryAllDeliveryDynamics</b></p>
            <img src="./img/img4.png" alt="Step 4">
        </div>
        <div class="step">
            <p>5、点击<b>Response(响应)</b>将所有内容都复制</p>
            <img src="./img/img4.png" alt="Step 5">
        </div>
        <div class="step">
            <p>6、到上面的文本框后点击<b>查询</b>按钮，下方就是解析出的文本</p>
            <img src="./img/img4.png" alt="Step 5">
        </div>
    </div>
</div>
</body>
</html>